import React, { FC, useState } from "react";
import { Button, Typography, Space, Empty, Spin } from "antd";
import { useTitle } from "ahooks";
import styles from "./commonList.module.scss";
import QuestionCardAntUi from "../../components/QuestionCardAntUi";
import SearchList from "../../components/SearchList";
import ListPagination from '../../components/ListPagination'
// 使用自定义hook，请求星标页数据
import useLoadQuestionListData from "../../hooks/useLoadingQuestionListData";

/* const rawQuestionList = [
  {
    _id: "q1",
    title: "问卷1",
    isPublished: false,
    isStar: true,
    answerCount: 5,
    createAt: "7月28 14:27",
  },
  {
    _id: "q2",
    title: "问卷2",
    isPublished: false,
    isStar: true,
    answerCount: 5,
    createAt: "7月27 04:27",
  },
  {
    _id: "q3",
    title: "问卷3",
    isPublished: false,
    isStar: true,
    answerCount: 4,
    createAt: "7月27 14:27",
  },
  {
    _id: "q4",
    title: "问卷4",
    isPublished: true,
    isStar: true,
    answerCount: 6,
    createAt: "7月26 14:27",
  },
]; */
const { Title } = Typography;
const Star: FC = () => {
  // let [list, setList] = useState(rawQuestionList);
  const { data = {}, loading } = useLoadQuestionListData({ isStar: true });
  const { list = [], total = 0 } = data;
  useTitle("鸣远问卷 - 星标问卷");
  return (
    <>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>星标问卷</Title>
        </div>
        <div className={styles.right}>
          <SearchList />
        </div>
      </div>
      <div className={styles.content}>
        {loading && (
          <div style={{ textAlign: "center" }}>
            <Spin></Spin>
          </div>
        )}
        {!loading && list.length === 0 && <Empty description="暂无内容" />}
        {!loading &&
          list.length &&
          list.map((itm: any) => {
            const { _id } = itm;
            return <QuestionCardAntUi key={_id} {...itm} />;
          })}
      </div>
      <div className={styles.footer}>
          <ListPagination total={total}/>
      </div>
    </>
  );
};

export default Star;
